<template>
  <div
      class="LeftMenu"
      :class="{'leftMenu-hover':hover==1,'leftMenu-nohover':hover==0}"
      @mouseenter="menuin"
      @mouseleave="menuout"
  >
    <div
        class="left-menu-item"
        @mouseenter="showhover(index)"
        @mouseout="hiddenehover(index)"
        v-for="(item,index) in collectMenu"
        :key="index"
        @click="linkTo(item)"
    >
      <span class="left-menu-icon" :class="item.icon"></span>
      <div
          class="left-menu-title"
          :class="{'left-menu-title-hover':hover==1,'left-menu-title-nohover':hover==0}"
      >
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div
        v-if="itemHover"
        class="left-menu-hover"
        :class="{'left-menu-hover-hover':hover==1,'left-menu-hover-nohover':hover==0}"
        ref="hover"
        :style="'top:'+top+'px;'"
        @click="link"
    >
      <div class="left-menu-hidden"></div>
    </div>
  </div>
</template>

<script>
import {collectList} from '@/system/api/sysApi'
import {geticon} from '@/utils/public'

export default {
  name: 'leftMenu',
  components: {},
  watch: {
    '$store.state.commonData.collectViews': function () {
      this.getcollectList()
    },
  },
  data() {
    return {
      collectMenu: [],
      hover: -1,
      itemHover: false,
      cunrrentitem: -1,
      top: -150,
      itemHoverCanClose: true,
      count:0,
    }
  },
  computed: {
    setClass: function () {
      return function (path) {
        return geticon(path)
      }
    },
  },
  methods: {
    linkTo(item) {
      if (item.wmName) {
        //				if(this.$store.state.tagsview.activetag.path != item.wmName ){
        this.$router.push(item.wmName)
        //				}
      }
    },
    menuin() {
      this.hover = 1
    },
    menuout() {
      this.hover = 0
      this.itemHover = false
    },
    showhover(index) {
      this.itemHoverCanClose = false
      this.itemHover = true
      this.top = index * 48
      this.cunrrentitem = index
    },

    hiddenehover(index) {
    },
    link() {
      const path = this.collectMenu[this.cunrrentitem].wmName
      let func = this.collectMenu[this.cunrrentitem];
      if (path) {
        const name = 'templatePage'
        const index = path.indexOf(name)
        let item 
        if (index !== -1) {
          let func = this.collectMenu[this.cunrrentitem]
          const id = path.substr(index + name.length + 1, path.length + 1)
          const title = path.substr(index + 4 + name.length + 1)
          item = {
	        	path: "/t" + id + "/:id",
	            name: "t" + id,
	            title: func.name,
	            funcId: func.id
	        }
        } else {
          item = {
	        	path: func.wmName,            
	            title: func.name,
	            funcId: func.id
	       	}
        }
        this.linkClick(item)	
      }      
      
//    if (path) {
//      const name = 'templatePage'
//      const index = path.indexOf(name)
//      if (index !== -1) {
//        let func = this.collectMenu[this.cunrrentitem]
//        const id = path.substr(index + name.length + 1, path.length + 1)
//        const title = path.substr(index + 4 + name.length + 1)
//        const routes = [
//          {
//            path: '/t' + id + '/:id',
//            name: 't' + id,
//            component: () =>
//                import(
//                    '@/system/pages/customPage/templatePage'
//                    ),
//            props: true,
//            meta: {
//              title: func.name,
//              keepAlive: false,
//              funcId: func.id,
//              icon: func.icon,
//            },
//            children: [],
//          },
//        ]
//        let routerExist = false
//        this.routerMap.forEach((element) => {
//          if (element === routes[0].name) {
//            routerExist = true
//            return
//          }
//        })
//        if (!routerExist) {
//          this.routerMap.push(routes[0].name)
//          this.$router.addRoutes(routes)
//          this.$router.options.routes.push(routes[0])
//        }
//        this.$router.push('/t' + id + '/' + id)
//      } else {
//        this.$router.push(
//            this.collectMenu[this.cunrrentitem].wmName
//        )
//        let func = this.collectMenu[this.cunrrentitem]
//        this.$router.options.routes.forEach((route, index) => {
//          if (route.path == func.wmName) {
//            this.$set(route.meta, 'title', func.name)
//            this.$set(route.meta, 'funcId', func.id)
//          }
//        })
//      }
//    }
    },
    getcollectList() {
      this.hover = -1
      collectList().then((res) => {
        //				console.log(res);
        if (res.success) {          
          if (res.info.length > 0) {
          	let  pcHeight = document.documentElement.clientHeight;
  					this.count = parseInt((pcHeight - 78)/48);
  					if(this.count>=res.info.length){
  						this.collectMenu = res.info;
  					}else{
  						this.collectMenu = [];  					
	  					for(let i=0;i<this.count;i++){
	  						this.collectMenu.push(res.info[i]);
	  					} 
  					}
  					 					
          } else {
            this.collectMenu.push({
              name: null,
              icon: null,
              wmName: null,
            })
          }
        }
      })
    },
  },
  mounted() {
    this.getcollectList()
  },
}
</script>

<style scoped>
.LeftMenu {
  position: fixed;
  z-index: 100;
  top: 78px;
  height: 100%;
  overflow-y: scroll;
  font-size: 16px;
  font-weight: 400;
  color: var(--head-sys-text-color);
  background: linear-gradient(
      90deg,
      var(--left-menu-back-color) 0%,
      var(--left-menu-back-color) 100%
  );
  box-shadow: 10px 0px 20px 0px var(--left-menu-boxshadow-color);
  font-size: 16px;
}

.leftMenu-hover {
  background: linear-gradient(
      90deg,
      var(--left-menu-back-color) 0%,
      var(--left-menu-back-center-color) 50%,
      var(--left-menu-back-end-color) 100%
  );
  box-shadow: 2px 0px 20px 0px var(--left-menu-hover-boxshadow-color);
  animation: leftMenuhover 0.3s;
}

@keyframes leftMenuhover {
  from {
    background: linear-gradient(
        90deg,
        var(--left-menu-back-color) 0%,
        var(--left-menu-back-color) 100%
    );
    box-shadow: 10px 0px 20px 0px var(--left-menu-boxshadow-color);
  }
  to {
    background: linear-gradient(
        90deg,
        var(--left-menu-back-color) 0%,
        var(--left-menu-back-center-color) 50%,
        var(--left-menu-back-end-color) 100%
    );
    box-shadow: 2px 0px 20px 0px var(--left-menu-hover-boxshadow-color);
  }
}

.leftMenu-nohover {
  background: linear-gradient(
      90deg,
      var(--left-menu-back-color) 0%,
      var(--left-menu-back-color) 100%
  );
  box-shadow: 10px 0px 20px 0px var(--left-menu-boxshadow-color);
  animation: leftMenunohover;
}

@keyframes leftMenunohover {
  from {
    background: linear-gradient(
        90deg,
        var(--left-menu-back-color) 0%,
        var(--left-menu-back-center-color) 50%,
        var(--left-menu-back-end-color) 100%
    );
    box-shadow: 2px 0px 20px 0px var(--left-menu-hover-boxshadow-color);
  }
  to {
    background: linear-gradient(
        90deg,
        var(--left-menu-back-color) 0%,
        var(--left-menu-back-color) 100%
    );
    box-shadow: 10px 0px 20px 0px var(--left-menu-boxshadow-color);
  }
}

.left-menu-item {
  display: flex;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
}

.left-menu-text {
  width: 72px;
  height: 46px;
  line-height: 46px;
  text-align: left;
  padding-left: 8px;
}

.left-menu-text-hover {
  width: 240px;
  transition: all 0.4s;
}

.left-menu-text-nohover {
  width: 72px;
  transition: all 0.4s;
}

.left-menu-icon {
  font-size: 22px;
  font-family: 'iconfont';
  width: 75px;
  height: 48px;
  line-height: 48px;
  text-align: center;
}

.left-menu-title {
  height: 48;
  width: 0px;
  line-height: 48px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 0;
  font-size: 16px;
  justify-content: space-between;
  text-align: left;
}

.left-menu-title-hover {
  width: 125px;
  height: auto;
  animation: menuhover 0.3s;
}

@keyframes menuhover {
  from {
    width: 0;
    height: auto;
  }
  to {
    width: 125px;
    height: auto;
  }
}

.left-menu-title-nohover {
  width: 0;
  height: auto;
  animation: menuhoverout 0.3s;
}

@keyframes menuhoverout {
  from {
    width: 125px;
    height: auto;
  }
  to {
    width: 0;
    height: auto;
  }
}

.left-menu-hover {
  max-width: 75px;
  height: 48px;
  overflow: hidden;
  border-left: 3px solid var(--left-menu-item-hover-border-color);
  transition: all ease 0.3s;
  position: absolute;
  cursor: pointer;
}

.left-menu-hover-hover {
  max-width: 200px;
}

.left-menu-hover-nohover {
  max-width: 75px;
}

.left-menu-hidden {
  width: 197px;
  height: 48px;
  border-radius: 0px 16px 16px 0px;
  box-shadow: 0px 10px 20px 0px var(--left-menu-item-hover-boxshadow-color),
  0px -10px 20px 0px var(--left-menu-item-hover-boxshadow-color);
  background: var(--left-menu-item-hover-back-color);
}

.LeftMenu::-webkit-scrollbar-track {
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.LeftMenu::-webkit-scrollbar {
  width: 0px;
}

.LeftMenu::-webkit-scrollbar-thumb {
  background-color: ghostwhite;
  border-radius: 10%;
}
</style>
